<style lang="scss" scoped>

    $width:800px;

    $bg_color:white;

    $color:#5b5b5b;

    .container{
      width: $width;
      height: auto;
      float: right;
      clear: none;
      padding-left: 30px;
      background: $bg_color;
    }

    .font{
      font-family: '微软雅黑';
      color: $color;
    }

    .lifecycle{
      @extend  .font;
      width:100%;
      height: 50px;
      font-size: 26px;
      padding: 15px 0 0px 0px;
      display: inline-block;
      border-radius: 5px;
      margin-bottom: 20px;
    }

    .operate-group{
      width:80px;
      height: 105px;
      display: inline-block;
      float: left;
      text-align: center;
      margin-right: 20px;
      cursor: pointer;
    }

    .icon-base{

      width:60px;
      height: 60px;
      margin: 10px;
      display: inline-block;
      background-size: cover;
      margin-bottom: 0px;
    }

    .icon-all{

      @extend .icon-base;

      background-image:url("../../../../assets/images/icon-all.png") ;

    }
    .icon-todo{

      @extend .icon-base;

      background-image:url("../../../../assets/images/icon-todo.png") ;

      height: 52px;
      width: 50px;
      margin-top: 16px;
    }

    .icon-big-contract{
      @extend .icon-base;

      background-image:url("../../../../assets/images/contract.png") ;

    }

    .icon-fare{
      @extend .icon-base;

      background-image:url("../../../../assets/images/fare.png") ;

      height: 52px;
      width: 52px;
      margin-top: 16px;
      margin-bottom: 2px;
    }

    .icon-audit{
      @extend .icon-base;

      background-image:url("../../../../assets/images/icon-audit.png") ;
      height: 52px;
      width:52px;
      margin-top: 16px;
    }

    .icon-adjust{
      @extend .icon-base;

      background-image:url("../../../../assets/images/icon-adjust.png") ;
      height: 52px;
      width:52px;
      margin-top: 16px;
    }

    .icon-text{
      color: #777;
      font-family: '微软雅黑';
    }

    .todo-add-icon{
      @extend .icon-base;
      background-image:url("../../../../assets/images/icon-detail-add.png") ;
      height: 55px;
      width:55px;
      margin-top: 15px;
    }

    .text-desc{

      @extend  .icon-text;

      height: 30px;
      line-height: 30px;
    }

   .list-thing{
     display: block;
     float: left;
     height: auto;
     width:100%;
     margin-top: 20px;

     .date-title{
       font-size: 20px;
       font-family: '微软雅黑';
       color: #777;
     }

     .inner-wrapper{
       width:100%;
       margin: 10px 0;
       display: block;
       float: left;
        border-left: 1px solid #777;
       padding: 15px 0;
     }

     .item-todo{
        min-height: 40px;
        margin-bottom: 20px;

        &:last-child{
          margin-bottom: 0px;
        }
     }


     .item-todo-base{
       width:40px;
       height: 40px;
       display: inline-block;
       background-size: cover;
       margin-left: 30px;
       margin-right: 10px;
       float: left;
     }

     .item-icon-todo{
        @extend  .item-todo-base;
        background-image:url("../../../../assets/images/item-todo.png") ;
        vertical-align: middle;
     }

     .item-icon-future{
       @extend  .item-todo-base;
       height: 35px;
       width:35px;
       margin-left: 33px;
       margin-right: 15px;
       background-image:url("../../../../assets/images/icon-todo-1.png") ;
       vertical-align: middle;
       margin-top: 5px;
     }

     .item-icon-audit{
       @extend  .item-todo-base;
       height: 35px;
       width:35px;
       margin-left: 33px;
       margin-right: 15px;
       background-image:url("../../../../assets/images/icon-audit.png") ;
       vertical-align: middle;
       margin-top: 5px;
     }

     .item-icon-progress{
       @extend  .item-todo-base;
       height: 35px;
       width:35px;
       margin-left: 33px;
       margin-right: 15px;
       background-image:url("../../../../assets/images/icon-todo.png") ;
       vertical-align: middle;
       margin-top: 5px;
     }

     .item-icon-adjust{
       @extend  .item-todo-base;
       height: 35px;
       width:35px;
       margin-left: 33px;
       margin-right: 15px;
       background-image:url("../../../../assets/images/icon-adjust.png") ;
       vertical-align: middle;
       margin-top: 5px;
     }

     .item-icon-check{
       @extend  .item-todo-base;
       height: 35px;
       width:35px;
       margin-left: 33px;
       margin-right: 15px;
       background-image:url("../../../../assets/images/contract.png") ;
       vertical-align: middle;
       margin-top: 5px;
     }

     .item-icon-money{
       @extend  .item-todo-base;
       background-image:url("../../../../assets/images/money-small.png") ;
       vertical-align: middle;
     }

   }

    .item-text{
      color: #777;
      display: inline-block;
      width:600px;
    }

    .item-subList{
      width:600px;
      float: left;
      height: 40px;
      line-height:40px;
    }

    .audit-result{
      width:80px;
      height: 40px;
      margin-left: 40px;
      display: inline-block;
      text-align: center;
    }

    .hidden{
      opacity: 0;
    }

    .audit-result-success{
      color:green;
      @extend  .audit-result;
    }
    .audit-result-failed{

      color: red;
      @extend  .audit-result;

    }

    .detail-lbl{
      width:100px;
      text-align: center;
      display: inline-block;
    }

    .detail-desc{
      width:260px;
      display: inline-block;
    }

    .no-project-message{

      clear: both;
      width:600px;
      height: 200px;
      font-size: 26px;
      color: #777;
      line-height: 200px;
      text-align: center;
      float: left;
    }



</style>

<template>
    <div class="container">
      <span class="lifecycle">项目生命周期</span>
      <div class="operate-group" @click="getProjectDetail('all')">
        <span class="icon-all"></span>
        <span class="text-desc">全部</span>
      </div>
      <div class="operate-group"  @click="getProjectDetail('progress')">
        <span class="icon-todo"></span>
        <span class="text-desc">制定进度</span>
      </div>
      <div class="operate-group" @click="getProjectDetail('audit')">
        <span class="icon-audit"></span>
        <span class="text-desc">审查</span>
      </div>
      <div class="operate-group" @click="getProjectDetail('check')">
        <span class="icon-big-contract"></span>
        <span class="text-desc">进度检查</span>
      </div>
      <div class="operate-group" @click="getProjectDetail('adjust')">
        <span class="icon-adjust"></span>
        <span class="text-desc">进度调整</span>
      </div>
      <div class="operate-group" style="margin-left: 30px">
        <span class="todo-add-icon"></span>
      </div>
      <div class="list-thing" v-for="(parentItem,pIndex) in showData">
        <span class="date-title" v-if="fixRender(pIndex)">{{parentItem.date}}</span>
        <div class="inner-wrapper" v-if="fixRender(pIndex)">
          <div class="item-todo" v-for="item in parentItem.subList" v-if="item.items.length>0">
            <span :class="'item-icon-'+item.icon" ></span>
            <div class="item-text">
              <div class="item-subList" v-for="(subItem,index) in item.items">
                <span class="detail-lbl" :class="{'hidden':index!=0}">{{item.task}}:</span>
                <span class="detail-desc">{{subItem.value}}</span>
                <span :class="'audit-result-'+(subItem.result?'success':'failed')" v-if="subItem.result!=undefined">{{getResult(subItem.result)}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="no-project-message" v-if="list.length<=0">
        暂无数据
      </div>
    </div>
</template>

<script>
  export default {
      name:"ProjectOperationPanel",
      props:{
        list:{
          type:Array,
          required:true,
          default:{}
        }
      },
      data(){
        return {
          crtTask:'all',
          showData:[]
        };
      },
      methods:{
        fixRender(index){

          var flag=false;

          for(var i=0;i<this.showData[index].subList.length;i++){

            if (this.showData[index].subList[i].items.length>0){

              flag=true;

            }

          }

          return flag;

        },
        /**
         * 把要显示的数据统一从外界传入的数据中拷贝
         */
        copyList(){

          this.clearList();

          for (var i=0;i<this.list.length;i++) {

            var parentObj = {
              date:"",
              subList:[]
            };

            parentObj.date=this.list[i].date;

            for (var j = 0; j < this.list[i].subList.length; j++) {

              var sTarget=this.list[i].subList[j];

              var sObj={
                task:'',
                icon:'',
                items:[]
              };

              sObj.task=sTarget.task;
              sObj.icon=sTarget.icon;

              /**
               * 拷贝三级数组内容
               */
              for (var k=0;k<this.list[i].subList[j].items.length;k++){

                var sSTarget=this.list[i].subList[j].items[k];

                var sSubObj={ value:""};

                if (sSTarget.result!=undefined){
                  sSubObj.result=sSTarget.result;
                }

                sSubObj.value=sSTarget.value;

                sObj.items.push(sSubObj);

              }

              parentObj.subList.push(sObj);

            }

            this.showData.push(parentObj);
          }

        },
        /**
         * 清除多余的数据
         */
        clearList(){

          while(this.showData.length>0){
            this.showData.splice(0,1);
          }

        },
        getResult(flag){
          return flag?'审核通过':'审核未通过';
        },
        /**
         * 筛选出特定的数据
         */
        filterSpecialType(key){

//          if (key=='all'){
//            return;
//          }

          var pCounter=this.showData.length-1;

          /**
           * 这儿用while循环的意义是为了防止删除js数组元素的时候，把数组越删越短。
           */
          while (true){

            var pTarget=this.showData[pCounter];

            var counter=this.showData[pCounter].subList.length-1;

            while(true){

              var target=this.showData[pCounter].subList[counter];

              if (target.icon.indexOf(key)<0){

                this.showData[pCounter].subList.splice(counter,1);

                counter=this.showData[pCounter].subList.length-1;

              }
              else {
                counter--;
              }

              if (counter<0){
                break;
              }
            }

            if (pTarget.subList.length==0){

              this.showData.splice(pCounter,1);

              pCounter=this.showData.length-1;

            }
            else{
              pCounter--;
            }

            if (pCounter<0){
              break;
            }
          }

        },
        getProjectDetail(key){
          this.copyList();
          switch (key){
            case 'audit':;
              this.filterSpecialType('audit');
              break;
            case 'progress':
              this.filterSpecialType('progress');
              break;
            case 'check':
              this.filterSpecialType('check');
              break;
            case 'adjust':
              this.filterSpecialType('adjust');
              break;
            default:
              break;
          }
        }
      },
      watch:{
        list(newValue,value){
          this.copyList();
        }
      }
  }
</script>
